<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="h-ui-font/iconfont.min.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/weui.min.css" />
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue(1).js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				width: 100%;
				margin: 0px auto;
				min-width: 320px;
				max-width: 640px;
				position: relative;
			}
			
			.weui-search-bar {
				height: 50px;
				min-width: 320px;
				max-width: 640px;
				background-color: #0F88EB;
				position: fixed;
				top: 0px;
				width: 100%;
				z-index: 2;
			}
			
			.weui-search-bar img {
				margin: 0px 5px;
				height: 30px;
			}
			
			.weui-search-bar form {
				height: 30px;
				border-radius: 5px;
			}
			
			.weui-search-bar>div {
				width: 30px;
				height: 30px;
				line-height: 30px;
				color: white;
				font-weight: bold;
				text-align: center;
				font-size: 20px;
				margin-left: 10px;
			}
			
			.contents {
				width: 100%;
				height: 100%;
				padding-top: 50px;
				padding-bottom: 40px;
				/*border: 1px solid red;*/
			}
			
			.item {
				box-sizing: border-box;
				width: 100%;
				display: inline-block;
				color: black;
				padding: 10px;
				border-top: 5px solid #F3F3F3;
			}
			
			.itemtop {
				width: 100%;
				height: 20px;
				overflow: hidden;
			}
			
			.itemtop span {
				height: 100%;
				font-size: 12px;
				float: left;
				color: #c6c6c6;
				line-height: 20px;
				display: inline-block;
			}
			
			.itemtop span:first-child {
				width: 20px;
				margin-right: 5px;
				border-radius: 10px;
				overflow: hidden;
			}
			
			.itemtop span:nth-of-type(1) img {
				width: 100%;
			}
			
			.itemtitle {
				font-size: 14px;
			}
			.itemtitle h1{
				font-size: 14px !important;
			}
			.itemcontent {
				height: 100%;
				margin-top: 5px;
				font-size: 12px;
				cursor: pointer;
				display: -webkit-box;
				overflow: hidden;
				word-wrap: break-word;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			
			.itemtext {
				height: 20px;
				font-size: 12px;
				color: #c6c6c6;
				margin-top: 5px;
			}
			
			.itemtext span {
				margin-left: 5px;
			}
			
			.itemtext span:first-child {
				margin-left: 0px;
			}
			
			.itemtext span:last-of-type {
				cursor: pointer;
			}
			
			.weui-tabbar {
				min-width: 320px;
				max-width: 640px;
				height: 40px;
				position: fixed;
			}
			
			.weui-tabbar__icon {
				margin-top: -4px;
			}
			
			.active {
				color: rgba(0, 0, 255, 0.8) !important;
			}
			
			.ask {
				position: fixed;
				width: 50px;
				height: 50px;
				bottom: 80px;
				right: 50px;
				text-align: center;
				line-height: 50px;
				font-size: 50px;
				border-radius: 25px;
				background-color: white;
				z-index: 1000;
				color: #0F88EB;
			}
		</style>
	</head>

	<body>
		<!--头部-->
		<div class="weui-search-bar" id="searchBar">
			<form class="weui-search-bar__form">
				<div class="weui-search-bar__box">
					<i class="weui-icon-search"></i>
					<input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" v-model='selectInput'>
					<a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
				</div>
				<label class="weui-search-bar__label" id="searchText">
      					<i class="weui-icon-search"></i>
      					<span>搜索</span>
    			</label>
			</form>
			<div class="weui-icon-search"></div>
		</div>

		<!--内容-->
		<div class="contents" v-if="isShow">
			<!--提问-->
			<a href="ask.html" class="ask"><i class="Hui-iconfont Hui-iconfont-help"></i></a>
			<!--内容-->
			<div class="item" v-for="item in list">
				<div class="itemtop">
					<span><img :src="item1.touxiang"/></span>
					<span>来自话题：</span>
					<span v-html="item.fenlei"></span>
				</div>
				<div class="itemtitle" v-html="item.title"></div>
				<div href="content.html" class="itemcontent" v-html="item.context" @click='content1($index)'></div>
				<div class="itemtext"><span v-html="item.n_zan"></span>赞同<span v-html="item.n_ping"></span>评论<span v-html="guanzhu" v-on:click="guanzhu1()"></span></div>
			</div>

		</div>
		<div class="contents" v-else>
			<!--提问-->
			<a href="ask.html" class="ask"><i class="Hui-iconfont Hui-iconfont-help"></i></a>
			<!--内容-->
			<div class="item" v-for="item2 in list[0].List">
				<div class="itemtop">
					<span><img :src="item2.touxiang"/></span>
					<span>来自话题：</span>
					<span v-html="item2.fenlei"></span>
				</div>
				<div class="itemtitle" v-html="item2.title"></div>
				<div href="content.html" class="itemcontent" v-html="item2.context" @click='content2($index)'></div>
				<div class="itemtext"><span v-html="item2.n_zan"></span>赞同<span v-html="item.n_ping"></span>评论<span v-html="guanzhu" v-on:click="guanzhu1()"></span></div>
			</div>

		</div>

		<!--选项卡-->
		<div class="weui-tabbar">
			<a href="index.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="active Hui-iconfont Hui-iconfont-canshu"></i>
				</div>
			</a>
			<a href="find.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="Hui-iconfont Hui-iconfont-yanjing"></i>
				</div>
			</a>
			<a href="chart.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="Hui-iconfont Hui-iconfont-xiaoxi1"></i>
				</div>
			</a>
			<a href="more.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<i class="Hui-iconfont Hui-iconfont-menu"></i>
				</div>
			</a>
		</div>
		<script type="text/javascript">
			var ss;
			var dd;
			$.ajax({
				type: 'get',
				//async:false,
				url: "http://v2.mashupcloud.cn/developer/auth.do",
				data: {
					appkey: 'FvWrIYOQoTUYVbscUNQoQAVqsLnZqKEN',
					appsecret: 'ugCfcSmyLkcbCGfIuFOPEgTgPQPbyJSE'
				},
				success: function(json) {
					console.log(json)
					ss = JSON.parse(json)[1];
					dd = JSON.parse(json)[2];
					sessionStorage.setItem("appid", dd);
					sessionStorage.setItem("token", ss);
					//所有帖子
					$.ajax({
						type: 'get',
						url: "http://v2.mashupcloud.cn/SQL/sele_tie/",
						data: {
							appid: dd,
							token: ss,
							name: 'sele_tie',
						},
						success: function(json) {
							var vue = new Vue({
								el: "body",
								data: {
									list: JSON.parse(json)[2], //数组
									fenleiArr: [],
									isShow: true, //v-if的显示
									selectInput: "" //搜索框双向绑定，初始值为空
								},
								watch: {
									selectInput: function() { //监听搜索框是否变化做Ajax
										$.ajax({
											type: "get",
											url: "http://v2.mashupcloud.cn/SQL/sele_tie_mohu/",
											data: {
												appid: dd,
												token: ss,
												name: 'sele_tie_mohu',
												_v1: $("#searchInput").val(),
												_v2: $("#searchInput").val(),
											},
											success: function(json) {
												JSON.parse(json)[2] //返回数据[]
												obj = {
													List: JSON.parse(json)[2] //拿出数据放入{}
												}
												vue.list = []; //清空之前查询的
												vue.list.push(obj); //创建的json放入空数组list里
												//											console.log(JSON.parse(json)[2])
											}
										});
										if($("#searchInput").val().length >= 1) {
											this.isShow = false; //搜索框的值大于等于1是v-if隐藏
										}
									}
								},
								methods: {
									//v-if模板所跳链接
									content1: function(index) {
										//									console.log(this.list[index].id)
										location.href = "content.html?" + "index=" + encodeURI(this.list[index].id);
									},
									//v-else模板所跳链接
									content2: function(index) {
										location.href = "content.html?" + "index=" + encodeURI(this.list[0].List[index].id);
										//									console.log(this.list[0].List[index].id)
									}
								}

							})
						},

					});
				}
			});
		</script>
	</body>

</html>